// import PropTypes from 'prop-types'
import React, { memo } from 'react'
import FilterWarrper from './style'
import FilterData from '@/assets/data/filter_data.json'
import classNames from 'classnames'
import { useState } from 'react'

const index = memo((props) => {
  const [selectBtns,changeSelectBtns] = useState([]);
  const changeBtns = (n)=>{
    if(selectBtns.includes(n)){
      const index = selectBtns.findIndex(item=>item==n);
      const arr = [...selectBtns];
      arr.splice(index,1);
      changeSelectBtns(arr)
    }else{
      const arr = [...selectBtns];
      arr.push(n);
      changeSelectBtns(arr)
    }

  }
  return (
    <FilterWarrper>
        <div>
          <ul>
            {
              FilterData.map((n,i)=>{
                return <li 
                onClick={e=>changeBtns(n)}
                className={classNames({active:selectBtns.includes(n)})} key={i}>{n}</li>
              })
            }
          </ul>
        </div>
    </FilterWarrper>
  )
})

// index.propTypes = {}

export default index